<template>
  <div class="w-96 bg-white border-r border-gray-200 flex flex-col">
    <!-- 搜索框 -->
    <div class="p-4 border-b border-gray-100">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索AI角色..."
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    
    <!-- 角色列表 -->
    <div class="flex-1 overflow-y-auto">
      <div
        v-for="character in filteredCharacters"
        :key="character.id"
        class="character-card"
        :class="{ 'active': selectedId === character.id }"
        @click="$emit('select', character.id)"
      >
        <!-- 角色头像 -->
        <el-avatar :src="character.avatarUrl" :size="56">
          <el-icon size="24"><Avatar /></el-icon>
        </el-avatar>
        
        <!-- 角色信息 -->
        <div class="flex-1 ml-4 min-w-0">
          <div class="flex items-center justify-between mb-1">
            <h3 class="font-semibold text-gray-800 truncate">{{ character.name }}</h3>
            <div class="flex items-center">
              <div 
                class="w-2 h-2 rounded-full mr-2"
                :class="getStatusClass(character)"
              ></div>
              <el-badge 
                v-if="getUnreadCount(character.id)" 
                :value="getUnreadCount(character.id)" 
                :max="99"
                class="scale-75"
              />
            </div>
          </div>
          
          <p class="text-sm text-gray-500 mb-1 line-clamp-1">{{ character.description }}</p>
          
          <div class="flex items-center justify-between text-xs text-gray-400">
            <span class="character-type-tag">{{ getCharacterTypeLabel(character.characterType) }}</span>
            <span>{{ formatLastActiveTime(character.updatedAt) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredCharacters.length === 0" class="text-center py-12">
        <el-icon size="48" class="text-gray-300 mb-4"><Avatar /></el-icon>
        <p class="text-gray-500">{{ searchKeyword ? '未找到匹配的角色' : '暂无AI角色' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, Avatar } from '@element-plus/icons-vue'
import { formatTime } from '@/utils/time'
import type { Character } from '@/types/chat'

// Props
interface Props {
  characters: Character[]
  selectedId: number | null
}
const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  select: [id: number]
}>()

// 响应式数据
const searchKeyword = ref('')

// 计算属性
const filteredCharacters = computed(() => {
  if (!searchKeyword.value) return props.characters
  
  const keyword = searchKeyword.value.toLowerCase()
  return props.characters.filter(character =>
    character.name.toLowerCase().includes(keyword) ||
    character.description.toLowerCase().includes(keyword)
  )
})

// 方法
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

const getStatusClass = (character: Character) => {
  return character.isActive ? 'bg-green-400' : 'bg-gray-400'
}

const getUnreadCount = (characterId: number) => {
  // 这里应该从store获取未读消息数量
  return 0
}

const getCharacterTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    'psychologist': '心理医生',
    'friend': '朋友',
    'mentor': '导师',
    'companion': '伙伴',
    'therapist': '治疗师',
    'counselor': '顾问'
  }
  return labels[type] || type
}

const formatLastActiveTime = (time: string) => {
  return formatTime(time)
}
</script>

<style scoped>
.character-card {
  @apply p-4 border-b border-gray-50 cursor-pointer transition-all duration-200 hover:bg-gray-50 flex items-start;
}

.character-card.active {
  @apply bg-blue-50 border-blue-100;
}

.character-card.active::before {
  content: '';
  @apply absolute left-0 top-0 bottom-0 w-1 bg-blue-500;
}

.character-card {
  @apply relative;
}

.character-type-tag {
  @apply px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .w-96 {
    @apply w-full;
  }
}
</style>

